<template>
	<div class="mine-shopsettle-online-wrap" >
		<van-nav-bar
		  title="在线买单订单"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		<div class="top-fix" >
			<div
			class="search-box" >
				<div class="search-input" >
					<van-search
					  v-model="searchValue"
					  placeholder="输入订单号进行查询"
					  @search="onSearch"
					  :left-icon="searchHistoryIcon"
					>
					</van-search>
					
					<div class="search-btn active-btn" @click="handleToSearch" >搜索</div>
				</div>
			</div>
		</div>
		
		<div class="line-block" ></div>
		
		<van-list
		  v-model="loadingPage"
		  :finished="finished"
		  :finished-text="list.length ? '没有更多了' : ''"
		  @load="ajaxGoodList"
		>
		
			<div v-if="finished && !list.length" class="empty-good" >
				<van-empty description="暂无订单" />
			</div>
			
			<!-- 订单列表 -->
			<div class="order-ul" >
				<div 
				v-for="(item, index) in list"
				:key="index"
				class="order-li" >
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >订单号</div>
						<div class="order-li-ceil-val" >{{ item.trade_no }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >用户昵称</div>
						<div class="order-li-ceil-val" >{{ item.buyer?.nickname }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >用户电话</div>
						<div class="order-li-ceil-val" >{{ item.buyer?.account }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >付款金额</div>
						<div class="order-li-ceil-val" >{{ item.amount }}元</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >支付方式</div>
						<div class="order-li-ceil-val" >{{ item.payment_method }}</div>
					</div>
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >下单时间</div>
						<div class="order-li-ceil-val" >{{ item.trade_success_time }}</div>
					</div>
					<!-- <div class="order-li-ceil" >
						<div class="order-li-ceil-label" >让利比例</div>
						<div class="order-li-ceil-val" >{{ item.share_ratio * 100 }}%</div>
					</div> -->
					<div class="order-li-ceil" >
						<div class="order-li-ceil-label" >到账金额</div>
						<div class="order-li-ceil-val" >{{ item.settle_amount }}元</div>
					</div>
				</div>
				
			</div>
		
		</van-list>
		
		
	</div>
</template>

<script>
	import { searchLeftArrow, searchHistoryIcon } from '@/tool/static-img';
	export default {
		data() {
			return {
				searchLeftArrow, searchHistoryIcon,
				searchValue: '',
				
				// 分页
				page: 1,
				pageSize: 20,
				list: [],
				loadingPage: false,
				finished: false,
			}
		},
		methods: {
		    onClickLeft() {
		        this.$router.back()
		    },
			onSearch() {
				
				this.resetInit();
			},
			resetInit() { //重置
			  this.page = 1;
			  this.list = [];
			  this.finished = false;
			
			  this.loadingPage = true;
			  this.ajaxGoodList()
			},
			// 去搜索
			handleToSearch() {
				
				this.onSearch(this.searchValue);
			},
			// 列表请求
			ajaxGoodList() {
				let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				
				if(this.searchValue.trim()) {
					params['trade_no'] = this.searchValue;
				}
				
				params['source_type'] = 1;
				
				const id = this.$route.query.id;
				this.$http.get(`/store/manage/${id}/order_list`, {
					params
				})
					.then(res => {
					  const {
					    list
					  } = res.data;
					
					  if(list && list.length) {
					     this.page++;
					     this.list = this.list.concat(list);
					     // 加载状态结束
					     this.loadingPage = false;
					     if(list.length < this.pageSize) {
					      this.finished = true;
					     }
					  }else {
					    this.finished = true;
					  }
					})
				
			}
		}
	}
</script>

<style lang="scss" >
	.mine-shopsettle-online-wrap{
		position: relative;
		min-height: 100vh;
		padding-top: 46px;
		background-color: #F5F5F5;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
		    color: #333333;
		}
		.van-nav-bar__arrow{
		    font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		
		.top-fix{
			position: fixed;
			top: 46px;
			width: 100%;
			height: 0.88rem;
			background-color: #fff;
		}
		.line-block{
			height: 0.88rem;
		}
		.search-box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.88rem;
			.van-icon-clear{
				display: block;
				padding-bottom: 4px;
			}
			.search-left-arrow{
				width: 0.4rem;
				height: 0.4rem;
				padding: 0.24rem 0 0.24rem 0.32rem;
			}
			.search-input{
				position: relative;
				width: 6.86rem;
				margin: auto;
				.search-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0.28rem;
					font-weight: 400;
					color: #fff;
					position: absolute;
					right: 0.06rem;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 1.12rem;
					height: 0.52rem;
					border-radius: 0.3rem;
					background: linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%);
				}
				.van-search{
					padding: 0;
					background-color: #f4f4f4;
					border-radius: 0.32rem;
					.van-search__content{
						background-color: #f4f4f4;
						border-radius: 0.32rem;
						.van-cell{
							align-items: center;
							padding: 3px 3px 3px 0;
						}
					}
					.van-field__control{
						height: 26px;
						width: 4.2rem;
						line-height: 26px;
						font-weight: 400;
						font-size: 0.28rem;
					}
					.van-icon{
						height: 20px;
					}
					.van-icon__image{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		
		.empty-good{
			padding-top: 1rem;
		}
		
		.order-ul{
			padding: 0.24rem 0.24rem 0;
			.order-li{
				margin-bottom: 0.2rem;
				padding: 0.28rem 0.32rem;
				border-radius: 0.16rem;
				background-color: #FFFFFF;
				.order-li-ceil{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 0.4rem;
					margin-bottom: 0.16rem;
					font-size: 0.28rem;
					.order-li-ceil-label{
						color: #666666;
					}
					.order-li-ceil-val{
						color: #333333;
					}
				}
			}
		}
	}
</style>
